<template>
    <div class="print-component">
        <div id="printPanel">
            <div>
                <h1 style="text-align: center; font-size: 2vh">{{header}}&nbsp;&nbsp;{{$t("print.title")}}</h1>
                <div style="font-size: 1.2vh; text-align: right;line-height: 2vh">
                    <div>{{$t("print.operator")}}&nbsp;&nbsp;{{operator}}</div>
                    <div >{{$t("print.time")}}&nbsp;&nbsp;{{dateTime}}</div>
                </div>
            </div>
            <div style="display: flex; flex-direction: row; flex-wrap:wrap; line-height: 50px; margin-top: 20px" >
                <div v-for="item in dataList" :key="item.label" :value="item.value" style="width: 50%; text-align: left; display: flex; flex-direction: row;" >
                    <div style="font-size: 2vh; line-height: 4vh">{{item.label}}:</div>
                    <div style="font-size: 2vh; line-height: 4vh; margin-left: 2vh">{{item.value}}</div>
                </div>
            </div>
            <div style="display: flex; flex-direction: column; flex-wrap:wrap; line-height: 40px; margin-top: 50px">
                <div style="margin-left: 50%; text-align: left">
                    <span style="font-size: 2vh; line-height: 4vh">{{$t("print.sign")}}:</span>
                </div>
                <div style="margin-left: 50%; text-align: left">
                    <span style="font-size: 2vh; line-height: 4vh">{{$t("print.date")}}:</span>
                </div>
            </div>
        </div>

        <div>
            <button v-print="printObj" style="margin-top: 4vh;width: 100%; font-size: 2vh; background-color: #3a8ee6; color: white; border: 0; line-height: 4vh"> {{$t("print.btn")}} </button>
        </div>
    </div>
</template>

<script>
    export default {
        props : {
            header: {
                type: String,
                default: ""
            },
            dataList : {
                type: Array,
                default: () => []
            },
            dateTime: {
                type: String,
                default: ""
            },
            operator: {
                type: String,
                default: ""
            }
        },
        data() {
            let that = this;
            return {
                printObj: {
                    id : "printPanel",
                    closeCallback() {
                        that.$emit("close");
                    },
                }
            }
        },
        methods: {
        }
    }
</script>

<style media="print" scoped>
  #printPanel {
    background-color: white !important;
  }
</style>
